<!--
 * @Author: hq
 * @Date: 2022-05-23 11:07:54
 * @LastEditors: hq
 * @LastEditTime: 2022-06-30 16:34:23
 * @Description: 富文本编辑器
 * @version: 1.0
-->
<template>
  <div>
    <div
      id="websiteEditorElem"
      style="height: 400px; background: #ffffff"
    ></div>
  </div>
</template>
<script>
import upImg from "@/utils/upimg";
import E from "wangeditor";
import { upLoad } from "@/api/index";
export default {
  props: ["EditorTxt"],
  name: "text",
  data() {
    return {
      phoneEditor: "",
      pastImgUrl: "", //粘贴的图片地址
      parentEditorTxt: "",
    };
  },
  methods: {
    //上传图片
    async upLoad(formData) {
      const { data, err } = await upLoad(formData);
      if (err === 0) {
        this.pastImgUrl = data.file_src;
      }
    },
    init() {
      // 绑定div上的IDwebsiteEditorElem
      this.phoneEditor = new E("#websiteEditorElem");
      this.phoneEditor.config.customUploadImg = function (
        resultFiles,
        insertImgFn
      ) {
        // 上传图片，返回结果，将图片插入到编辑器中
        let file = { file: resultFiles[0] };
        upImg.upimg(
          (data) => {
            insertImgFn(data.data.pre_img);
          },
          1,
          file
        );
      };
      // 隐藏网络图片
      this.phoneEditor.config.showLinkImg = false;
      // 创建一个富文本编辑器
      this.phoneEditor.create();
      this.phoneEditor.txt.html(this.EditorTxt); //将父组件传来的数据放在富文本编辑器中。
      // 获取输入的内容
      this.phoneEditor.config.onchange = (html) => {
        // 打印输入的内容
        this.$emit("getEditorTxt", html);
      };
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
  },
  watch: {
    EditorTxt(val) {
      this.phoneEditor.txt.html(val);
    },
  },
};
</script>

<style lang="scss" scoped></style>
